@import 'variables';
.section-1 {
  position: relative;
  box-sizing: border-box;
  padding-top: 280px;
  padding-bottom: 20px;
  text-align: center;

  @media only screen and (max-width: $mobile-max-width) {
    padding-top: 200px;
  }

  .img-1 {
    position: absolute;
    top: 94px;
    right: 0;
    @media only screen and (max-width: $mobile-max-width) {
      display: none;
    }
  }

  .img-2 {
    position: absolute;
    bottom: 38px;
    left: 84px;

    @media only screen and (max-width: $mobile-max-width) {
      display: none;
    }
  }

  div {
    position: relative;
    z-index: 2;
    text-align: center;

    img {
      width: 500px;

      @media only screen and (max-width: $mobile-max-width) {
        width: 100%;
      }
    }

    p {
      font-size: 20px;
      line-height: 1.6;
      color: #919aa3;
    }

    button {
      width: 144px;
      height: 40px;
      margin-top: 15px;
      border: none;
      border-radius: 20px;
      box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      &:hover {
        box-shadow: none;
      }
    }
  }
}

.navigation {
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
  background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
}